<template>
  <div class="about-us-wrapper">

    <div class="about-us">
      <div class="about-us-banner__container">
        <div class="about-us-banner__title">
          {{currentItem.title}}
        </div>
        <div class="about-us-banner__sub-title">
          {{currentItem.subtitle||''}}
        </div>
      </div>
      <transition name="slide-fade" mode="out-in">
        <div class="about-us-main__container" :key="currentItem.title">
          <component :is="currentItem.content"></component>
        </div>
        <!--<div class="about-us-main__container" :key="currentItem.title" v-html="currentItem.content"></div>-->
      </transition>
      <div class="back-top" ref='backTopbtn' @click="goTop">
        <div class="back-top__icon">
          <svg-icon icon-class="scroll-arrow" size='small'></svg-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //关于我们
  import htmlAboutUs from "./about/about-us";
  //企业事务
  // import htmlStatement from "./business/statement";
  //佣金方案
  import htmlCommission from "./commission";

  const aboutUsList = [
    {
      icon: "about-us",
      title: "关于我们",
      sub: [
        {
          path: "about-us",
          title: "关于我们",
          content: htmlAboutUs,
          subtitle: 'About our company',
        },
        {
          path: "commission",
          title: "佣金方案",
          content: htmlCommission,
          subtitle: 'Commission program'
        },
      ]
    },
  ];

  export default {
    name: "about-us",

    props: ["path", "title"],

    data() {
      return {
        aboutUsList,
        routerVIew: "",
        isTop: true,
        timer: null
      };
    },

    methods: {
      needScroll() {
        let clientHeight = document.documentElement.clientHeight;
        let backTopbtn = this.$refs.backTopbtn;
        window.onscroll = function() {
          if (!this.isTop) {
            clearInterval(this.timer);
          }
          this.isTop = false;
        };
      },
      goTop() {
        let self = this;
        self.timer = setInterval(() => {
          let osTop =
            document.documentElement.scrollTop || document.body.scrollTop;
          let ispeed = Math.floor(-osTop / 5);
          document.documentElement.scrollTop = document.body.scrollTop =
            osTop + ispeed;
          self.isTop = true;
          if (osTop === 0) {
            clearInterval(self.timer);
          }
        }, 30);
      }
    },
    mounted() {
      this.needScroll();
    },
    computed: {
      fList() {
        return _.flatten(_.map(this.aboutUsList, "sub"));
      },
      currentItem() {
        return (
          _.find(this.fList, {path: this.path}) || this.aboutUsList[0].sub[0]
        );
      }
    },
  };
</script>

<style lang="scss" scoped>
  $--font-family: "MicrosoftYaHei-Bold";
  $--height: auto;

  @mixin ul_default_style {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @include b(about-us-wrapper) {
    background: #ffffff;
  }

  @include b(about-us) {
    position: relative;
    @include e(header) {
      text-align: center;
    }
    @include e(title) {
      font-size: 40px;
      margin-bottom: 20px;
    }
    @include e(sub-title) {
      font-size: 20px;
      margin-bottom: 10px;
    }
    @include e(brief) {
      font-size: $--font-size-large;
      margin-bottom: 20px;
    }
  }

  @include b(about-us-banner__container) {
    height: 405px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-family: $--font-family;
    font-weight: bold;
    color: #ffffff;
    @include utils-bg(url("./bg.png") no-repeat);
    background-size: cover;
    @include b(about-us-banner__title) {
      font-size: 43px;
    }
    @include b(about-us-banner__sub-title) {
      font-size: 18px;
      margin-top: 12px;
    }
  }

  @include b(about-us-main) {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 40px;

    @include e(title) {
      color: $--color-white;
    }
    @include e(container) {
      background: #ffffff;
      overflow: auto;
      @include main-center(1200px);
    }
  }

  @include b(about-us-nav-wrapper) {
    width: 210px;
  }

  @include b(about-us-nav) {
    @include ul_default_style();
    background: #ffffff;
    overflow: auto;

    @include e(tab) {
      @include ul_default_style();
      box-sizing: border-box;
    }

    @include e(sub-nav) {
      @include ul_default_style();
    }

    @include e(sub-tab) {
      @include ul_default_style();
      padding: 13px 0;
      height: 26px;
    }

    @include e(sub-tab-text) {
      height: 26px;
      line-height: 26px;
      color: $--color-info;
      border-left: 2px solid #ffffff;
      padding-left: 73px;
      cursor: pointer;
    }

    @include e(title) {
      display: flex;
      align-items: center;
      height: 52px;
      padding: 13px 27px;
      font-size: $--font-size-base;
      font-weight: bold;
      box-sizing: border-box;
      .svg-icon {
        width: 34px;
        height: 24px;
        margin-right: 16px;
      }
    }
  }

  @include b(back-top) {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1e5adc;
    box-shadow: 0px 11px 34px 0px rgba(0, 0, 0, 0.16);
    position: absolute;
    bottom: 88px;
    right: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    @include e(icon) {
      .svg-icon {
        width: 18px;
        height: 22px;

      }
    }
  }

  .router-link-exact-active .about-us-nav__sub-tab-text {
    border-left: 2px solid #1e5adc;
  }

  //安全中心页面样式区域
</style>